<template>
    <div class="app"><!---->
        <div data-v-c8141014="" class="category">
            <header data-v-ba0d3df6="" data-v-c8141014="" class="mint-header header">
                <div class="mint-header-button is-left"></div>
                <h1 class="mint-header-title">分类</h1>
                <div class="mint-header-button is-right">
                    <div data-v-41e53151="" data-v-ba0d3df6="">
                        <div data-v-41e53151="" class="right-item">
                            <img data-v-41e53151=""
                                 src=""
                                 class="icon minIcon">
                        </div>
                    </div>
                </div>
            </header>
            <div data-v-0333c025="" data-v-c8141014="" class="ui-category-body">
                <div data-v-0333c025="" class="category-flex">
                    <div data-v-0333c025="" class="category-sidebar">
                        <ul data-v-0333c025="">
                            <li v-for="item in tree" class="item "
                                v-bind:class="current==item? 'sidbaractive':'noActive' "
                                v-on:click="current=item"
                            >
                                <a >{{item.name}}</a>
                            </li>
                            <!--<li data-v-0333c025="" class="item noActive"><a data-v-0333c025="">家用电器</a></li>-->
                            <!--<li data-v-0333c025="" class="item noActive"><a data-v-0333c025="">电脑办公</a></li>-->
                            <!--<li data-v-0333c025="" class="item sidbaractive"><a data-v-0333c025="">手机/数码</a></li>-->
                            <!--<li data-v-0333c025="" class="item noActive"><a data-v-0333c025="">家居/家具/厨具</a></li>-->
                            <!--<li data-v-0333c025="" class="item noActive"><a data-v-0333c025="">食品/生鲜</a></li>-->
                            <!--<li data-v-0333c025="" class="item noActive"><a data-v-0333c025="">男装/女装/童装</a></li>-->
                            <!--<li data-v-0333c025="" class="item noActive"><a data-v-0333c025="">女鞋/箱包</a></li>-->
                            <!--<li data-v-0333c025="" class="item noActive"><a data-v-0333c025="">母婴/玩具</a></li>-->
                            <!--<li data-v-0333c025="" class="item noActive"><a data-v-0333c025="">男鞋/运动</a></li>-->
                            <!--<li data-v-0333c025="" class="item noActive"><a data-v-0333c025="">礼品鲜花</a></li>-->
                        </ul>
                    </div>
                    <div data-v-0333c025="" class="category-content">
                        <ul data-v-0333c025="">
                            <li data-v-0333c025="" class="item" >
                                <a v-bind:href="'#/category/path/' + current.id" >全部</a>
                            </li>
                            <li v-for="item in current.child" class="item">
                                <a v-bind:href="'#/category/path/' + item.id" > {{item.name}} </a>
                                <div class="child-cat-group" >

                                    <div class="child-cat-item" v-for="child in item.child" >

                                        <a v-bind:href="'#/category/path/' + child.id"  >
                                            <img v-show="child.image" v-bind:src="config.web_url + child.image" alt="" >
                                            <img v-show="!child.image" src="/image/placeholder.png" alt="" >
                                        </a>
                                        <a v-bind:href="'#/category/path/' + child.id" >{{child.name}}</a>

                                    </div>


                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <bottom-nav></bottom-nav>

    </div>
</template>

<script>
    import nav from '../components/common/nav';
    export default {
        name: "category2",

        data:function(){

            return {

                tree:{},
                current:{}
            }
        },

        methods:{

            init:function(){

                var t = this;
                var url = this.config.web_url + '/?r=category/tree';
                this.axios.get( url ).then(function( res ){

                    //todo 根据属性结构布局页面
                    t.tree = res.data;
                    for(var p in t.tree ){
                        t.current = t.tree[p];
                        // t.current = t.tree[p].id;
                        break;
                    }


                });

            }

        },

        created:function(){

            this.init();

        },

        components:{

            'bottom-nav':nav
        }

    }
</script>

<style scoped>

</style>